<template>
  <div class="app-container" style="width: 40%">
    <el-form ref="form" :model="repairRecord"  :rules="rules">

      <el-form-item label="车  牌  号" label-width="120px" prop="carId">
        <el-select v-model="repairRecord.carId" placeholder="请选择车牌号" label-width="150px"
                   v-bind:disabled="repairRecord.id===0">
          <el-option
            v-for="(citem,cindex) in carList"
            :key="cindex"
            :label="citem.carNo"
            :value="citem.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="修   理   厂" label-width="120px" prop="repairDepotId">
        <el-select v-model="repairRecord.repairDepotId" placeholder="请选择修理厂" label-width="80px">
          <el-option
            v-for="(uitem,uindex) in unitList"
            :key="uindex"
            v-if="uitem.unitType === 34  && uitem.isdisable!==0"
            :label="uitem.unitName"
            :value="uitem.id">
          </el-option>
        </el-select>
      </el-form-item>


      <el-form-item label="送修时间" label-width="120px" prop="sendTime">
        <div class="block" label-width="80px">
          <el-date-picker
            v-model="repairRecord.sendTime"
            type="date"
            :picker-options="sendTimeEnd"
            placeholder="选择日期时间" id="t2" v-bind:disabled="repairRecord.id===0">
          </el-date-picker>
        </div>
      </el-form-item>

      <el-form-item label="预计取车时间" label-width="120px" prop="estimateTime">
        <div class="block" label-width="80px">
          <el-date-picker
            v-model="repairRecord.estimateTime"
            type="date"
            :picker-options="estimateTimeStart"
            placeholder="选择日期时间">
          </el-date-picker>
        </div>
      </el-form-item>

      <el-form-item label="送修原因" label-width="120px" prop="sendReason">
        <el-input v-model="repairRecord.sendReason"></el-input>
      </el-form-item>

      <el-form-item label="送修备注" label-width="120px" prop="sendRemarks">
        <el-input v-model="repairRecord.sendRemarks"></el-input>
      </el-form-item>

      <el-form-item label="经 办 人" label-width="120px" prop="operator">
        <el-select v-model="repairRecord.operator" placeholder="请选择经办人" label-width="80px">
          <el-option
            v-for="(usitem,usindex) in usersList"
            v-if="usitem.isdisable !== 0 "
            :key="usindex"
            :label="usitem.rname"
            :value="usitem.id">
          </el-option>
        </el-select>
      </el-form-item>


      <el-form-item style="margin-left: 120px">
        <el-button type="success" @click="saveOrUpdate('form')">保存</el-button>
        <el-button type="danger" @click="jumpBack">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
  import api_repair from "@/api/repair_record.js";

  export default {
    name: "add_repair_record",

    data() {
      return {
        carList: [],
        unitList: [],
        usersList: [],
        repairRecord: {
          carId: '',
          repairDepotId: '',
          sendTime: '',
          estimateTime: '',
          sendReason: '',
          sendRemarks: '',
          operator: ''
        },
        rules: {
          carId: [{required: true, message: '请选择车牌号', trigger: 'change'}],
          repairDepotId: [{required: true, message: '请选择维修单位', trigger: 'change'}],
          sendTime: [{required: true, message: '请选择送修时间', trigger: 'change'}],
          estimateTime: [{required: true, message: '请选择预计取车时间', trigger: 'change'}],
          sendReason: [{required: true, message: '请填写送修原因', trigger: 'change'}],
          sendRemarks: [{required: true, message: '请填写送修备注', trigger: 'change'}],
          operator: [{required: true, message: '请选择经办人', trigger: 'change'}],
        },
        sendTimeEnd: {
          disabledDate: (time) => {
            if (this.repairRecord.estimateTime) {
              return (
                time.getTime() >
                new Date(
                  this.repairRecord.estimateTime
                ).getTime()
              );
            }
          }
        },
        estimateTimeStart: {
          disabledDate: (time) => {
            if (this.repairRecord.sendTime) {
              return (
                time.getTime() <
                new Date(
                  this.repairRecord.sendTime
                ).getTime()
              );
            }
          }
        }
      }
    },
    created() {
      this.init();
    },
    watch: {
      $route(to, form) {
        this.init();
      },
    },
    methods: {
      init() {
        api_repair.getAddList()
          .then(Response => {
            this.carList = Response.data.carList;
            this.unitList = Response.data.unitList;
            this.usersList = Response.data.usersList;
          })
        if (this.$route.params && this.$route.params.id) {
          const id = this.$route.params.id;
          this.getById(id);
        } else {
          this.repairRecord = {};
        }
      },
      saveOrUpdate(name) {
        this.$refs[name].validate((valid) => {
          if (valid) {
            if (this.repairRecord) {
              this.save();
            } else {
              this.update();
            }
          } else {
            console.log('error submit!!');
            return false;
          }
        });

      },
      save() {
        api_repair.saveRecord(this.repairRecord)
          .then(Response => {
            this.$message({
              message: "保存成功",
              type: "success"
            });
            this.$router.push({path: "/daily_work/repair_record"});
          });
      },
      getById(id) {
        api_repair.getById(id)
          .then(Response => {
            this.repairRecord = Response.data.repairRecord
            this.repairTypeList = Response.data.repairTypeList
          })
      },
      update() {
        api_repair.saveRecord(this.repairRecord)
          .then((response) => {
            this.$message({
              message: "修改成功",
              type: "success",
            });
            this.$router.push({path: "/daily_work/repair_record"});
          });
      },
      jumpBack() {
        this.$router.push({path: "/daily_work/repair_record"});
      },

    }
  };
</script>
<style>
</style>
